<template>
	<div class="userBg">
		<div class="formBox">
			<div class="inpBox">
				<div class="label">姓名</div>
				<div class="inp">
					<u-cell :title="userinfo.name" :border="false" ></u-cell>
				</div>
			</div>
			<!-- <div class="inpBox">
				<div class="label">请假开始时间</div>
				<div class="inp">
					<u-cell :title="startTime" :isLink="true" :border="false" @click="showStartDate = true"></u-cell>
				</div>
			</div>
			<div class="inpBox">
				<div class="label">请假结束时间</div>
				<div class="inp">
					<u-cell :title="endTime" :isLink="true" :border="false" @click="showEndDate = true"></u-cell>
				</div>
			</div>
			<div class="inpBox">
				<div class="label">请假原因</div>
				<div class="">
					<u--textarea v-model="reason" placeholder="请输入请假原因" ></u--textarea>
				</div>
			</div>
			<div class="inpBox">
				<div class="label">请假时长</div>
				<div class="inp">
					<u-cell :title="qjTime" :border="false" ></u-cell>
				</div>
			</div> -->
			<div class="subBox">
				<u-button type="error" text="签到" @click="subInfo"></u-button>
			</div>
			<!-- <div class="getList">
				<span @click="getMyJl(0)">
					我的请假纪录
				</span>
				
			</div> -->
		</div>
		
		<!-- <u-popup :show="showList" @close="showList = false" mode="center">
			<div class="popContent">
				<div class="item" v-for="(item,index) in qingjiaList" :key="index">
					<ul>
						<li><div class="label">开始时间：</div> {{ item.startTime }}</li>
						<li><div class="label">结束时间：</div> {{ item.endTime }}</li>
						<li v-if="item.xiaojia"><div class="label">销假时间：</div> {{ item.xiaojiaTime }}</li>
					</ul>
					<image v-if="item.xiaojia" src="https://www.baixuemianshi.com/zhuanti/images/xiaojia.png" mode="widthFix" class="xiaojia"></image>
				</div>
			</div>
		</u-popup> -->
		
		<div class="loadingBox" v-if="showLoading">
			<image src="https://www.baixuemianshi.com/zhuanti/tingkezheng/images/loading.gif" mode="widthFix"></image>
		</div>
		
		
		<u-datetime-picker ref="datetimePicker" :formatter="formatter" :show="showStartDate" mode="datetime" :minDate="1704038400000"  @confirm="pickerDate" @cancel="showStartDate = false"></u-datetime-picker>
		<u-datetime-picker ref="datetimePicker2" :show="showEndDate" mode="datetime" :minDate="1704038400000"  @confirm="pickerDate2" @cancel="showEndDate = false"></u-datetime-picker>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				openid:"",
				userinfo:{},
				startTime: "请选择开始时间",
				showStartDate:false,
				endTime: "请选择结束时间",
				showEndDate:false,
				reason:"",
				qingjiaList:[],
				showList:false,
				showLoading: true
			}
		},
		onLoad(options) {
			
		},
		onReady() {
			this.$refs.datetimePicker.setFormatter(this.formatter)
			this.$refs.datetimePicker2.setFormatter(this.formatter)
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			},
			qjTime(){
				let that= this
				let leftTime = new Date(that.endTime) - new Date(that.startTime)
				var daysRemaining = Math.floor(leftTime / (1000 * 3600 * 24));
				var hoursRemaining = Math.floor((leftTime % (1000 * 3600 * 24)) / (1000 * 3600));
				
				if(!isNaN(daysRemaining) && !isNaN(hoursRemaining)){
					return daysRemaining + '天' + hoursRemaining + '小时'
				}else{
					return '总请假时长'
				}
				
			}
		},
		created() {
			let that = this;
			if(!this.userphone){
				this.getopenid()
			}else{
				this.getqingjiauser()
			}
			
		},
		mounted() {
			let that = this 
			
		},
		watch: {
			
		},
		methods: {
			...mapActions(['LogSetPhone','LogSetOpenid']),
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			getopenid() {
				let that = this
				wx.cloud.callFunction({
					name: 'getopenid',
					data: {},
					complete: res => {
						wx.setStorageSync("useropenid", res.result.openid)
						that.openid = res.result.openid
						that.getUserDetail()
					}
				})
			},
			getUserDetail() {
				let that = this
				db.collection('all_user').where({
					_openid: that.openid
				}).get({
					success: res => {
						console.log(res)
						if (res.data.length > 0) {
							that.LogSetPhone(res.data[0].phone)
							that.getqingjiauser()
						}else{
							wx.showToast({
								title:"您未办理听课证",
								icon:"error"
							})
						}
					}
				})
			},
			getqingjiauser(){
				let that = this
				db.collection('25gk_qdinfo').where({
					phone: that.userphone
				}).get({
					success: res => {
						that.showLoading = false
						if (res.data.length > 0) {
							that.userinfo = res.data[0]
						}else{
							wx.showToast({
								title:"您未在签到系统里",
								icon:"error"
							})
						}
					}
				})
			},
			
			subInfo(){
				
				let that = this
				console.log(that.userinfo.phone,"that.userinfo.phone")
				if(that.userinfo.phone){
					console.log(123)
					that.showLoading = true
					db.collection('25gk_qiandao').where({
						phone:that.userinfo.phone,
						time: that.getTime(),
					}).get({
						success: res => {
							console.log()
							if(res.data.length>0){
								wx.showToast({
									title:"您已签到！",
									icon:"error"
								})
								that.showLoading = false
							}else{
								db.collection('25gk_qiandao').add({
									data:{
										name:that.userinfo.name,
										phone:that.userinfo.phone,
										jiaowu:that.userinfo.jiaowu,
										zbls:that.userinfo.zbls,
										xbls:that.userinfo.xbls,
										xitong:that.userinfo.xt,
										time: that.getTime(),
									},
									success: res=>{
										that.showLoading = false
										wx.showToast({
											title:"签到成功！",
											icon:"success"
										})
									}
								})
							}
							
						}
					})
					
				}else{
					wx.showToast({
						title:"您未在签到系统里",
						icon:"error"
					})
				}
		
				
				
			},
			getTime(){
				let that = this
				let day = new Date()
				let y = day.getFullYear()
				let m = (day.getMonth() + 1).toString().padStart(2, '0');
				let d = day.getDate().toString().padStart(2, '0');
				let hour = day.getHours().toString().padStart(2, '0');
				let miu = day.getMinutes().toString().padStart(2, '0');
				let time = y + '-' + m + '-' + d
				return time
			},
		
		},
		components: {
			
		}
	};
</script>

<style scoped>
	@import url(../qingjia/index.css);
</style>